<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>05-键盘事件</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div class="container">
            <h3>键盘事件</h3>
            <!-- keyup keydown input keypress 根据键盘码 -->

            <p class="input-group">
                输入事件： 
                <input type="text" class="form-control" placeholder="普通的键盘输入" @input="insertMsg">
            </p>
            <p class="input-group">
                键盘按下： 
                <input type="text" class="form-control" placeholder="键盘按下" @keydown="keyDownMsg">
            </p>
            <p class="input-group">
                键盘抬起： 
                <input type="text" class="form-control" placeholder="键盘抬起" @keyup="keyUpMsg">
            </p>
            <p class="input-group">
                键盘按压： 
                <input type="text" class="form-control" placeholder="键盘按压" @keypress="keyUpMsg">
            </p>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {},
            methods: {
                insertMsg(e) {
                    // console.log('输入事件');
                    console.log(e.target.value)
                },
                keyDownMsg(e) {
                    console.log(e.keyCode)
                    // console.log(e.target.value)
                },
                keyUpMsg(e) {
                    console.log(e.keyCode)
                    // 键盘按压不识别系统按键，区分大小写，键码不一样
                    // console.log(e.target.value)
                }
            }
        })
    </script>
</body>
</html>